<template>
    <div
    class="inline-icon"
    v-for="item in dataSource"
    :key="item.id"
    v-iconDrag
    :style="{ left:`${item.position.x}px`,top:`${item.position.y}px` }"
    @dblclick='openWindow(item)'
    :appId='item.id'
    @contextmenu.stop="openIconMenu($event,item)">
        <div>
            <p>
                <img
                draggable="false"
                :src="item.icon" 
                :alt="item.name">
            </p>
            <p>{{item.name}}</p>
        </div>
    </div>
</template>

<script>
import { toRefs,reactive } from 'vue'
export default {
  name: 'AppIcon',
  components: {},
  props: {
    dataSource:{
        type:Array,
        default:null
    },
  },
  emits: ['openWindow','openMenu'],
  setup(props,context) {
    let methods = reactive({
        openWindow(value){
            context.emit('openWindow',value)
        },
        openIconMenu(e,value){
            context.emit('openMenu',e,value)
        }
    })
    return {
        ...toRefs(methods)
    }
  }
}

</script>
<style lang='scss' scoped>
.inline-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    max-width: 80px;
    padding: 5px;
    margin: 10px;
    cursor: pointer;
    position: absolute;
    background-color: transparent;
    border-radius: 5px;

    div {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        p {
            font-size: 13px;
            color: $white;
            @include ellipsis(2);
            width: 80px;
            padding: 0 5px;

            img {
                height: 40px;
                width: 40px;
            }
        }
    }

    &:hover {
        background-color: rgba(255,255,255, .4);
    }

    &:active {
        background-color: rgba(255,255,255, .6);
    }
}
</style>
